<template>
    <div class="navigation-bar">
        <div class="navigation-bar-left">
            <div class="logo">
                <img src="../assets/logo.png" alt="">
            </div>
            <router-link v-for="(item,index) in navTab" :key="index" :to="item.path" :class="{'active' : thisPath === item.path || isHovered == index}"
             @mouseover="isHovered=index" @mouseleave="isHovered='null'">{{ item.title }}</router-link>
        </div>
        <div class="navigation-bar-right">
            <div class="search-box">
                <input type="text" @keyup.enter="toSearch" placeholder="请输入关键字" v-model="searchValue">
                <el-icon @click="toSearch"><Search /></el-icon>
            </div>
            <div class="login-box" v-if="!isLogged">
                <span @click="toggleLogin">登录</span>
                <span >注册</span>
            </div>
            <div class="logged" v-if="isLogged" @mouseleave="closeLoggedList">
                <div class="logged-list">
                    <ul>
                        <router-link v-for="item in loggedLi" :key="item.title" v-show="item.isShow" :to="item.path">{{ item.title }}</router-link>    
                        <a @click="toChangePasswd">修改密码</a>    
                    </ul>
                </div>
                <!-- 显示头像，点击头像有列表，列表项有个人中心、我的比赛、退出登录-->
                <div class="avatar" @click="toggleLoggedList">
                    <img :src="store.state.userInfo.avatar" alt="">
                </div>
                <!-- 退出登录div -->
                <div class="sign-out" @click="signOut">
                    <span>退出</span>
                    <el-icon><CircleClose /></el-icon>
                </div>

            </div>
        </div>
        <teleport to="#app">
            <Login ref="loginComponent" @role="handleLoggedLi"/>

        </teleport>
    </div>
</template>
<script setup>
import Login from '@/components/LoginWithReg.vue'
import {computed, ref} from 'vue'
import { useStore } from 'vuex'
import { gsap } from 'gsap'
import router from '@/router';
import { ElMessage } from 'element-plus'


const isHovered = ref('null')
const store = useStore()
const isListShow = ref(false)
const searchValue = ref('')
// 使用ref获取子组件实例
const loginComponent = ref(null)
// 获取登录状态，判断是否显示登录按钮，computed是计算属性
const isLogged = computed(() => {
    return store.state.isLogin
})

const thisPath = computed(() => {
    return router.currentRoute.value.path
})

const navTab = ref([
    {
        title: '首页',
        path: '/'
    },
    {
        title: '赛事列表',
        path: '/race-list'
    },
    {
        title: '作品广场',
        path: '/works'
    }
])

const toggleLogin = () => {
    // 调用子组件的方法
    loginComponent.value.toggleLogin('open', 'login')
}
const toChangePasswd = () => {
    loginComponent.value.toggleLogin('open', 'reset')

}
// 列表打开动画
const toggleLoggedList = () => {
    if (isListShow.value) {
        gsap.to('.logged .avatar', {
        duration: 0.5,
        transform: 'translate(0, 0) scale(1)',
        ease: 'power2.out'
    })
    gsap.to('.logged-list', {
        duration: 0.5,
        height: '0px',
        opacity: 0,
        display: 'none',
        top: '55px',
        ease: 'power2.out'
    })
    isListShow.value = false
    } else {
        gsap.to('.logged .avatar', {
        duration: 0.5,
        transform: 'translate(0, 25px) scale(1.5)',
        ease: 'power2.out'
    })
    gsap.to('.logged-list', {
        duration: 0.5,
        height: 'auto',
        opacity: 1,
        display: 'block',
        top: '60px',
        ease: 'power2.out'
    })
    isListShow.value = true
    }
    
}

// 列表关闭
const closeLoggedList = () => {
    gsap.to('.avatar', {
        duration: 0.5,
        transform: 'translate(0, 0) scale(1)',
        ease: 'power2.out'
    })
    gsap.to('.logged-list', {
        duration: 0.5,
        height: '0px',
        opacity: 0,
        display: 'none',
        top: '55px',
        ease: 'power2.out'
    })
    isListShow.value = false
}

// 退出登录
const signOut = () => {
    // 退出登录，清除token
    store.commit('setLoginState', false)
    store.commit('setUserInfo', '')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('token')
    for(let i = 0; i < loggedLi.value.length; i++) {
        loggedLi.value[i].isShow = true
    }
    const startPath = router.currentRoute.value.path.split('/')[1]
    if (startPath == 'personal') {
        router.push('/')
    }

}
// 搜索
const toSearch = () => {
    if (searchValue.value === '') {
        ElMessage({
            message: '请输入搜索内容',
            type: 'warning'
        })
        return
    }
    // 并刷新目标页面
    router.push({
        path: '/search',
        query: {
            searchValue: searchValue.value
        }
    })
    
    
}

const loggedLi = ref([
    {
        title: '个人资料',
        path: '/personal/center',
        icon: '',
        isShow: true
    },
    {
        title: '我的比赛',
        path: '/personal/race',
        icon: '',
        isShow: true
    },
    {
        title: '我的评审',
        path: '/personal/assess',
        icon: '',
        isShow: true
    },
    {
        title: '我的通知',
        path: '/personal/notice',
        icon: '',
        isShow: true
    },
    {
        title: '我的消息',
        path: '/personal/message',
        icon: '',
        isShow: true
    }
])

const handleLoggedLi = (role) => {
    console.log('role:',role)
    switch (role) {
        case 'admin':
            break;
        case 'teacher':
            loggedLi.value[2].isShow = false
            break;
        case 'audience':
            loggedLi.value[1].isShow = false
            loggedLi.value[2].isShow = false
            loggedLi.value[3].isShow = false
            break;
        case 'judge':
            loggedLi.value[1].isShow = false
            break;
        default:
            break;
    
    }
}
if(isLogged.value) {
    handleLoggedLi(store.state.userInfo.role)
}

// 暴露给其他组件调用登录栏
defineExpose({
  toggleLogin
})

</script>
<style scoped lang="scss">
    .navigation-bar {
        width: 100%;
        height: 60px;
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgba(255, 255, 255, 0.7);
        background-image: radial-gradient(rgba(255, 255, 255, 0.264) 1px, rgba(255, 255, 255, 0.7) 1px);
        background-size: 4px 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        box-shadow: #ccc 0 0 10px;
        .navigation-bar-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .logo {
                width: 50px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20px;
                img {
                    width: 50px;
                    height: 50px;
                }
            }
            a {
                color: #000;
                font-size: 16px;
                padding: 20px 20px;
                text-decoration: none;
                position: relative;
                &:hover {
                    color: #42b983;
                }
                &::after {
                    content: '';
                    width: 0;
                    position: absolute;
                    bottom: 0;
                    height: 4px;
                    background-color: #42b983;
                    transition: .3s all ease-out;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
            .active {
                color: #42b983;
            }
            .active::after {
                width: 100%;
            }
        }
        .navigation-bar-right {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .search-box {
                width: 200px;
                height: 30px;
                border: 1px solid #ccc;
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                box-sizing: border-box;
                background-color: #fff;
                input {
                    width: 100%;
                    height: 100%;
                    border: none;
                    outline: none;
                    background-color: transparent;
                }
                .el-icon {
                    width: 30px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    &:hover {
                        color: #42b983;
                    }
                }
                button {
                    width: 50px;
                    height: 100%;
                    border: none;
                    outline: none;
                    background-color: transparent;
                    cursor: pointer;
                }
            }
            .login-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    color: #000;
                    font-size: 16px;
                    margin-left: 20px;
                    cursor: pointer;
                    &:hover {
                        color: #42b983;
                    }
                }
            }
            .logged {
                position: relative;
                margin-left: 10px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .avatar {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    cursor: pointer;
                    margin: 10px;
                    border: 1px solid #ccc;
                    // transform: translate(0, 25px) scale(1.5);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    &:hover {
                        box-shadow: #42b983 0 0 6px;
                    }
                }
                .logged-list {
                    width: 150px;
                    height: 0;
                    opacity: 0;
                    display: none;
                    background-color: #fff;
                    position: absolute;
                    top: 55px;
                    left: -45px;
                    box-shadow: #ccc 0 0 10px;
                    border-radius: 5px;
                    overflow: hidden;
                    ul {
                        width: 100%;
                        // height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;
                        box-sizing: border-box;
                        margin: 0;
                        margin-top: 30px;
                        padding: 0;
                        a {
                            width: 100%;
                            // height: 30px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 10px 10px;
                            box-sizing: border-box;
                            cursor: pointer;
                            color: var(--color-font-1);
                            text-decoration: none;
                            &:hover {
                                background-color: #42b983;
                                color: #fff;
                            }
                        }
                    }
                    
                }
                .sign-out {
                    // width: 100px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    cursor: pointer;
                    padding-left: 10px;
                    &:hover {
                        color: #c70b0b;
                        text-shadow: #c70b0b75 0 0 2px;
                    }
                    .el-icon {
                        width: 30px;
                        height: 30px;
                    }
                }
            }
        }
    }

</style>